<template>
    <div class="common-layout-list">
        <div class="top-wrap" v-if="isShowTopWrap">
            <div class="title-container clearFloat">
                <div class="title-wrap" v-if="isShowTitle">
                    <slot name="title">{{ title }}</slot>
                </div>

                <div class="top-left" v-if="isShowTopLeft" >
                    <slot name="top-left"></slot>
                </div>

                <div class="top-right" v-if="isShowTopRight" :style="{width: topRightWidth + 'px'}">
                    <slot name="top-right"></slot>
                </div>
            </div>
        </div>

        <div class="table-wrap" :style="{height: `calc(100% - 10px - ${isShowTopWrap ? '49px' : '0px'})`}">
            <div class="search-wrap" v-if="$slots['table-search'] || $scopedSlots['table-search']">
                <slot name="table-search" :toggleSearchMoreVisible="handleToggleSearchMoreVisible"></slot>
            </div>

            <transition name="el-zoom-in-top">
                <div class="search-more-wrap" v-show="searchMoreVisible">
                    <slot name="search-more"></slot>
                </div>
            </transition>

            <div class="table" :style="{
                height: `calc(100% - 20px - ${pageHeight} - ${tableSearchHeight} - ${!$slots['table-search'] && !$scopedSlots['table-search'] ? '0px' : '0px'})`,
            }">
                <slot name="table"></slot>
            </div>

            <div class="page" v-if="$slots['page']" :style="{height: pageHeight, lineHeight: pageHeight}">
                <div class="selection-operate" v-if="selection">
                    <span class="num">已选择<em>{{tableSelection.length}}</em>条数据</span>

                    <span class="clear" @click="handleClearSelection">清空</span>

                    <slot name="operate"/>
                </div>

                <slot name="page"></slot>
            </div>
        </div>

        <slot></slot>
    </div>
</template>

<script>
    import {Utils} from "jboot-env";

    export default {
        name: 'ListLayout',

        props: {
            title: String,

            topRightWidth: {
                type: Number,
                default (){
                    return 410
                }
            },
            topLeftWidth: {
                type: Number,
                default (){
                    return 410
                }
            },

            rowKey: {
                type: String,
                default: 'id'
            },

            selection: Boolean,

            page: Object
        },

        data() {
            return {
                searchMoreVisible: false,
                tableSelectionMap: {}
            }
        },

        computed: {
            pageHeight (){
                return !!this.$slots.page ? '28px' : '0px';
            },

            tableSearchHeight (){
                return !!this.$slots['table-search'] || !!this.$scopedSlots['table-search'] ? '49px' : '0px';
            },

            isShowTitle() {
                return !this.$slots['top-left'] && (!!this.title || !!this.$slots.title);
            },

            isShowTopLeft() {
                return !!this.$slots['top-left'] && !this.isShowTitle;
            },

            isShowTopRight() {
                return !!this.$slots['top-right'];
            },

            isShowTopWrap (){
                return this.isShowTitle || this.isShowTopLeft || this.isShowTopRight;
            },

            tableSelection ({tableSelectionMap}){
                return Object.values(tableSelectionMap).reduce(function (result, current) {
                    return result.concat(...current);
                }, []);
            }
        },

        created() {
            this.$busCollect(
                this.$bus.on('_.core.list.refresh', () => this.clearSelection())
            );
        },

        mounted() {
            const tableInstance = this.getTableInstance();

            if(Utils.isNotEmpty(tableInstance)){
                tableInstance.$on('on-selection-change', this.handleRowSelectChange);
            }
        },

        methods: {
            getTableInstance (){
                const [tableInstance] = this.$children.filter(child => child.$options.name === 'Table');

                return tableInstance;
            },

            handleToggleSearchMoreVisible (){
                this.searchMoreVisible = !this.searchMoreVisible;
            },

            handleRowSelectChange (selection){
                const {page} = this;

                Utils.isNotEmpty(page) && this.$set(this.tableSelectionMap, page.pageNum, selection);
            },

            handleTableDefSelect (){
                const {rowKey, page: {pageNum, data} = {}} = this;

                const selectionKeys = Utils.blank2Default(this.tableSelectionMap[pageNum], []).map(item => {
                    return item[this.rowKey];
                });

                data.forEach(item => {
                    const {[rowKey]: key} = item;

                    this.$set(item, '_checked', selectionKeys.includes(key));
                });
            },

            handleClearSelection (){
                this.$tips.confirm('是否要清空选择项？', '提醒').then(() => {
                    this.clearSelection();
                }).catch(() => {});
            },

            clearSelection (){
                this.$set(this, 'tableSelectionMap', {});

                const tableInstance = this.getTableInstance();

                Utils.isNotEmpty(tableInstance) && tableInstance.selectAll(false);
            },

            getSelection (){
                return this.tableSelection;
            }
        },

        watch: {
            'page.pageNum' (){
                this.handleTableDefSelect();
            }
        }
    }
</script>

<style lang="scss">
    .common-layout-list {
        padding: 15px;
        width: 100%;
        min-height: 100%;
        background-color: #FFFFFF;
        /*border-radius: 4px;*/
        box-sizing: border-box;
        & > div{
            width: 100%;
        }
        & > .top-wrap{
            min-height: 49px;
            z-index: 1;
            position: relative;
            & > .title-container{
                padding: 5px 0;
                & > .title-wrap{
                    font-size: 14px;
                    font-weight: bold;
                    display: inline-block;
                    vertical-align: sub;
                    color: #F01F1B;
                }
                & > .top-left{
                    display: inline-block;
                }
                & > .top-right{
                    float: right;
                    text-align: right;
                    & .el-form-item{
                        margin-bottom: 0;
                        &:last-child{
                            margin-right: 0;
                        }
                        & .el-button{
                            &+.el-button{
                                margin-left: 3px;
                            }
                        }
                    }
                }
            }
        }
        & > .table-wrap{
            // overflow: auto;
            background-color: #FFFFFF;
            border-radius: 4px;
            position: relative;
            & > .search-more-wrap{
                width: 100%;
                position: absolute;
                top: 45px;
                left: 0;
                z-index: 4;
            }
            & > .search-wrap{
                & .ivu-form{
                    & > .ivu-form-item{
                        margin-bottom: 10px !important;
                    }
                }
            }
            & > .page{
                margin-top: 10px;
                display: flex;
                & > .selection-operate{
                    font-size: 14px;
                    & > .num{
                        color: #999999;
                        & > em{
                            font-style: normal;
                            margin: 0 2px;
                            font-weight: 500;
                            color: #1e80ff;
                        }
                    }
                    & > .clear{
                        margin-left: 10px;
                        color: #ff4949;
                        text-decoration: underline;
                        cursor: pointer;
                        &:hover{
                            color: red;
                        }
                    }
                }
                & > .ivu-page{
                    flex: 1;
                    text-align: right;
                    & .ivu-page-options{
                        & > .ivu-page-options-sizer{
                            margin-right: 0 !important;
                        }
                    }
                }
            }
        }
    }
</style>
